<template>
  <div>
    <div class="operation-box">
      <a-card title="房屋详情">
       
        <a-button type="primary" slot="extra" @click="() => {$router.push({name:'data_houses_operation',params:{id:$route.params.id}})}">编辑</a-button>
        <a-button style="margin-left: 10px;"   slot="extra" @click="() => { $router.push({name:'data_houses_index',params:{id:this.all_id,pageNo:this.cur_page}}) }">返回</a-button>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>房号：<span>{{detail.name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>所属小区：<span>{{detail.bd_name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>楼宇：<span>{{detail.building_name}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>单元：<span>{{detail.unit_name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>所在楼层：<span>{{detail.floor}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>房屋面积：<span>{{detail.area}}平方米</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>投票权数：<span>{{detail.weights}}票</span></div>
          </a-col>
          <a-col :span="8">
            <div>房屋标签：<span>{{detail.label_name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>房屋类型：<span>{{detail.houses_type_text}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>房屋朝向：<span>{{detail.direction}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>房屋户型：<span>{{detail.room_numbers}}室{{detail.hall_numbers}}厅{{detail.guard_numbers}}卫</span></div>
          </a-col>
          <a-col :span="8">
            <div>交房时间：<span>{{detail.time}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>公摊费系数：<span>{{detail.ratio}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>产权年限：<span>{{detail.years ? `${detail.years}年` : '未知'}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>附件：<span v-if="$common.isEmpty(detail.imgs)">暂无附件</span>
              <a href="javascript:void(0);" @click="() => { lookFileImgModal = true }" v-else>查看附件</a>
            </div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>房屋户数：<span>{{detail.num}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>是否收取公摊：<span>{{detail.is_gt==1 ?'是' : '否'}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>是否交房：<span>{{detail.over_house==1 ?'是' : '否'}}</span></div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <div>备注：<span>{{detail.remarks}}</span></div>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="收费项目">
        <router-link tag="a" :to="{name:'data_houses_bz',params:{house_id:detail.id}}" slot="extra">添加收费标准</router-link>
        <a-table :columns="columns" :dataSource="dataSource" rowKey="id">
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="bzOperation($event,record)">
<!--                <a-menu-item key="1">编辑</a-menu-item>-->
                <a-menu-item key="2">删除</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关住户">
        <a-table :columns="userColumns" :dataSource="house_user" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="houseOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关车位">
        <a-table :columns="parkingColumns" :dataSource="parkingData" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="parkingOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关车辆">
        <a-table :columns="vehicleColumns" :dataSource="vehicleData" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="vehicleOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关账单">
        <a-table :columns="priceColumns" :dataSource="priceData" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="houseOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <a-modal :visible="lookFileImgModal" :footer="null" @cancel="() => { lookFileImgModal = false; }">
      <img style="padding:5%" v-for="(item,index) in detail.imgs" :key="index" :src="baseURL + 'static/uploads/' + item.url" :alt="'房屋附件图 - '+item.name" :style="{width:'100%',minHeight:'100px'}">
    </a-modal>
  </div>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  export default {
    name: 'data_houses_detail',
    data() {
      return {
        token:this.$ls.get(ACCESS_TOKEN), // 用户token
        baseURL:this.axios.defaults.baseURL,
        detail:{}, // 房屋详情
        cur_page:1,
        all_id:'all',
        lookFileImgModal:false,
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}}
        },
        columns:[{ title:'收费项目', dataIndex:'project_name', }, { title: '收费标准', dataIndex:'project_detail_name' }, { title: '开始时间', dataIndex:'start_time' }, { title: '结束时间', dataIndex:'end_time' }, { title: '自动生成时间', dataIndex:'' },{ title: '备注', dataIndex:'remarks' }, { title: '操作', dataIndex:'operation', scopedSlots:{customRender:'operation'} }],
        dataSource:[], // 列数据
        userColumns:[{title:'姓名',dataIndex:'name'},{title:'小区',dataIndex:'bd_name'},{title:'楼宇',dataIndex:'building_name'},{title:'单元',dataIndex:'unit_name'},{title:'房号',dataIndex:'houses_name'},{title:'手机',dataIndex:'phone'},{title:'住户身份',dataIndex:'type_text'},{title:'有效期',dataIndex:'time_text'},{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关住户数据
        house_user:[],
        parkingColumns:[{ title:'车位号',dataIndex:'car_area_name' }, { title: '小区',dataIndex:'bd_name' },{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关车位列
        parkingData:[], // 相关车位列数据
        vehicleColumns:[{ title:'车牌号码',dataIndex:'car_name' }, { title: '小区',dataIndex:'bd_name' },{ title: '车主姓名',dataIndex:'username' },{ title: '车主手机号',dataIndex:'phone' },{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关车辆列
        vehicleData:[], // 相关车辆数据
        priceColumns: [{ title:'类别',dataIndex:'type' }, { title: '房号/车牌/车位号/住户',dataIndex:'house_name' },{ title: '费用名称',dataIndex:'name' },{ title: '开始时间',dataIndex:'start_time' },{title:'结束时间',dataIndex:'end_time'},{title:'单价',dataIndex:'one_money'},{title:'数量',dataIndex:'num'},{title:'应收金额',dataIndex:'price'}], // 相关账单
        priceData: [],
      }
    },
    async mounted() {
      let { id ,cur_page,all_id} = this.$route.params;
      this.id = Number(id);
      if(!isNaN(this.id)){
        this.getInfo(id);
        this.getHouseNoPay(id);
      }else this.$router.go(-1);

      if(!isNaN(cur_page)){
        this.cur_page=cur_page;
      }else{
        this.cur_page=1;
      }
      if(!isNaN(all_id)){
         if(all_id==0){
          this.all_id='all'
        }else{
           this.all_id=all_id;
        }
      }else{
        
        this.all_id='all';
      }
    },
    methods:{
      // 获取小区设置信息
      getInfo(id) {
        this.axios({
          method:'post',
          url:'/houses/detail',
          data:{token:this.token,id}
        }).then(res => {
          this.detail = res.data.info;
          this.house_user = res.data.house_user;
          this.dataSource = res.data.bz;
          this.parkingData = res.data.carArea;
          this.vehicleData = res.data.car;
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        });
      },
      // 收费标准操作
      bzOperation({ key },info) {
        const _this = this;
        if(key === '2'){
          _this.$confirm({
            title: `确定要删除\"${info.project_name}\"？`,
            onOk() {
              return new Promise((resolve, reject) => {
                _this.axios({
                  method:'post',
                  url:'/houses/delBz',
                  data:{token:_this.token,id:info.id,houses_id:_this.id,type:1},
                }).then(res => {
                  if(res.code === 0){
                    _this.$message.success(res.msg,2);
                    _this.getInfo(_this.id);
                    resolve();
                  }else reject(res.msg);
                }).catch(err => {
                  _this.$message.error('服务器发生错误...',2);
                })
              }).catch((msg) => _this.$message.error(msg,2));
            },
            onCancel() {},
          });
        }
      },
      // 相关住户操作
      houseOperation({ key },info) {
        const _this = this;
        if(key === '1') this.$router.push({name:'data_household_detail',params:{id:info.id}});
        if(key === '2'){
          _this.$confirm({
            title: `确定要将住户\"${info.name}\"解绑？`,
            onOk() {
              return new Promise((resolve, reject) => {
                _this.axios({
                  method:'post',
                  url:'/houses/untied',
                  data:{token:_this.token,house_user_id:info.id,houses_id:_this.detail.id},
                }).then(res => {
                  if(res.code === 0){
                    _this.$message.success(res.msg,2);
                    _this.getInfo(_this.id);
                    resolve();
                  }else reject(res.msg);
                }).catch(err => {
                  _this.$message.error('服务器发生错误...',2);
                })
              }).catch((msg) => _this.$message.error(msg,2));
            },
            onCancel() {},
          });
        }
      },

      // 获取房屋未缴费账单
      getHouseNoPay(id) {
        this.axios({
          method:'post',
          url:'/houses/get_house_detail_nopay',
          data:{token:this.token,id}
        }).then(res => {
          this.priceData = res.data
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .operation-box{
    background: #ffffff;
    margin: 25px 25px 0;
    .detail-row-margin-bottom-15{
      margin-bottom: 15px;
    }
    a{
      text-decoration: none;
    }
  }
</style>